<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css" href="/lib/vue/index.css"/>
<link rel="stylesheet" type="text/css" href="/lib/third-icon/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/style.css"/>
</head>
<body>
<div id="app" v-cloak>
    <div class="show-header">
        <img class="avatar round size-L" src="/static/admin/picture/avatar.png?>" id="portrait">
        <dl>
            <dt>
                <span class="f-18">{{list.info.username}}</span>
                <span class="ml-10">状态：{{list.info.status == 1 ? '正常' : '禁用'}}</span>
                <span class="ml-10" style="font-size: 10px;">用户组：{{list.info.group_name}}</span>
            </dt>
            <dt>
                <span>创建时间：{{list.info.create_time}}</span>
                <span class="ml-10">更新时间：{{list.info.update_time}}</span>
                <span class="ml-10">登录时间：{{list.info.last_login_time}}</span>
                <span class="ml-10">登录IP ：{{list.info.last_login_ip}}</span>
            </dt>
        </dl>
    </div>
    <div class="show-body">
        <template>
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick" size="mini">
                <el-tab-pane label="操作日志" name="log">
                    <el-table :data="list.logs"
                              v-loading="loading"
                              :highlight-current-row="highlightCurrentRow">
                        <el-table-column
                                label="日志内容"
                                min-width="200"
                                prop="desc">
                        </el-table-column>
                        <el-table-column
                                label="客户端IP"
                                min-width="80"
                                prop="uip">
                        </el-table-column>
                        <el-table-column
                                label="操作时间"
                                fixed="right"
                                min-width="120"
                                prop="create_time">
                        </el-table-column>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="下级用户" name="subUser">下级用户</el-tab-pane>
                <el-tab-pane label="下级用户组" name="subGroup">下级用户组</el-tab-pane>
            </el-tabs>
        </template>
    </div>
</div>
</body>
<script type="text/javascript" src="/lib/jquery.min.js"></script>
<script type="text/javascript" src="/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="/lib/layer/3.1.1/layer.js"></script>
<script type="text/javascript" src="/lib/vue/vue.min.js"></script>
<script type="text/javascript" src="/lib/vue/index.js"></script>
<script type="text/javascript" src="/lib/sortable.js"></script>
<script type="text/javascript" src="/static/admin/js/style.js"></script>
<script>
var vm = new Vue({
    el: '#app',
    data: {
        activeName: 'log',
        list: [],
        loading: true,
        searchParam: '',
        highlightCurrentRow: true
    },
    methods: {
        getList() {
            let _this = this;

            $.ajax({
                url: 'ucenter',
                type: 'post',
                data: {
                    search_name: _this.searchParam ? $.trim(_this.searchParam ) : '',
                },
                beforeSend: function(){
                    _this.loading = true;
                },
                success: function (res) {
                    if (res.code !== 0) {
                        _this.$message.error(res.msg);
                        return;
                    }
                    setTimeout(() => {
                        _this.list = res.data;
                        _this.loading = false;
                    }, 200 * Math.random());
                },
                error: function () {
                    _this.loading = false;
                }
            });
        },
        handleClick(tab, event) {
            console.log(tab, event);
        }
    },
    mounted() {
        this.getList();
    }
});
</script>
